<template>
    <div class="Logon-box">

        <div class="Logon-nav">
            <van-nav-bar  left-text="返回" left-arrow   @click-left="onClickLeft"></van-nav-bar>
        </div>

        <div class="Logon-title"><h2>登录知乎日报</h2><p style="color:rgb(205 205 205)">选择登录方式</p>
                <p>账户 Admin  密码 123456</p>

            <div class="Logon-icon">

            <div class="zhihu"><img src="../assets/zhihu.jpg" alt=""></div>

            <div class="xinlang"><img src="../assets/xinlang.jpg" alt=""></div>
            
            </div>
        </div>
        <div class="Logon-main">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" @click="Logoned()">提交</van-button>
                </div>
                </van-form>
        </div>

    </div>
</template>

<script>
    import { Toast } from 'vant';

    export default {
        name:'Logon',
        data(){
            return{
                username: '',
                password: '',

            }
        },
         components:{
            Toast,
        },
        created(){
            
                
        },

         methods:{
            onClickLeft() {
            this.$router.go(-1);
        },
            onSubmit(values) {
            
            },

            Logoned(){
                let name = this.username;
                let pass = this.password;
                
                if(this.username=='Admin'&&this.password=='123456'){
                    
                    this.$router.push({name: 'Logoned', params: {}}); 
                    this.setCookie(name,pass,7);
                }
            
            },

            setCookie(c_name,c_pwd,exdays){
                    var exdate = new Date(); //获取当前时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
               
                window.document.cookie =
                    "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie =
                    "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
                

            },

            
   

            

            },
            //页面加载调用获取cookie值
           
        }
</script>

<style lang="less" scoped>

    .Logon-title{
        font-size: 16px;
        text-align: center;
        margin: 50px;
    }

    .Logon-icon{
        display: flex;
        justify-content: center;
        
    }
    .xinlang{
        margin-left: 30px;
    }

    img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    
</style>